<template>
    <div>
        <h1>shallowReactive和shallowRef</h1>
        <h2>shallowReactive:只处理对象内最外层的数据变成响应式（也就是浅响应式）</h2>
        <h2>shallowRef只处理value的响应式、不进行对象的reactive的处理</h2>
        <h2>{{a}}</h2>
        <h2>{{b}}</h2>
        <h2>{{c}}</h2>
        <h2>{{d}}</h2>
        <button @click="update()"></button>
    </div>
    
</template>
<script lang="ts">
import {defineComponent, onBeforeMount, onMounted, reactive, ref , shallowReactive, shallowRef, toRefs} from 'vue'

export default defineComponent({
    name:"建哥",
    setup() {
        const a = reactive({
            name:"建哥",
            car:{
                "name":"奔驰"
            }
        });
        const b = ref({
            name:"建哥",
            car:{
                "name":"奔驰"
            }
        })

        const c = shallowReactive({
            name:"建哥",
            car:{
                "name":"奔驰"
            }
        })

        const d = shallowRef({
            name:"建哥",
            car:{
                "name":"奔驰"
            }
        })

        const update = ()=>{
            // a.name += "==";
            // a.car.name+="==";
            // b.value.name += "==";
            // b.value.car.name += "=="
            // c.name += "=="
            //只能单个测试添加  此时这些重度的就不会添加
            // c.car.name += "=="
            d.value.name += "=="
            d.value.car.name += "=="
        }

        return {
            a,
            b,
            c,
            d,
            update
        }
    },
    directives:{
        jian(el,bind){
        }
    }
})

</script>
